<template>
  <el-dialog
    :title="$t('common.base.disassociate')"
    :visible.sync="unbindVisible"
    append-to-body
    width="440px"
  >
    <span>{{$t('product.qrcode.tips.tip10')}}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="unbindVisible = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button @click="unbindSubmit(true)" :disabled='pending' v-if="!fromProduct && canProductCodeDelete">{{ $t('product.qrcode.btns.btn6') }}</el-button>
      <el-button type="primary" @click="unbindSubmit(false)" :disabled='pending'>{{ $t('common.base.makeSure') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as producqQrcode from '@src/api/productQrcode';

export default {
  name:'unbind-dialog',
  data(){
    return {
      unbindVisible:false,
      pending:false
    }
  },
  props:{
    productId:{
      type:String,
      default:''
    },
    qrcodeId:{
      type:String,
      default:''
    },
    fromProduct:{
      type:Boolean,
      default:false
    },
    auth: {
      type:Object,
      default: () => {}
    },
  },
	computed: {
    canProductCodeDelete() {
      return this.auth?.PRODUCT_CODE_DELETE
    },
	},
  methods:{
    open(){
      this.unbindVisible=true;
    },
    async unbindSubmit(del){
      this.pending=true;
      try{
        let api=null;
        let params=null;
        if(del){
          api='unbindQrCode';
          params=[{
            productId:this.productId,
            qrcodeId:this.qrcodeId
          }];
        }else{
          api='unbindNotDeleteQrCode';
          params={
            productId:this.productId
          }
        }
        let {status,message}=await producqQrcode[api](params);
        if(status===0){
          this.unbindVisible=false;
          this.$emit('unbindSuc',del);
        }else{
          this.$notify.error({
            title: this.$t('common.base.requestError'),
            message: message,
            duration: 2000,
          });
        }
        this.pending=false;
      }catch(err){
        this.pending=false;
        console.error(err);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.el-button + .el-button{
  margin-left: 8px;
}
::v-deep .el-dialog{
  border-radius: 8px;
  overflow: hidden;
  .el-dialog__header{
    font-weight: bold;
  }
  .el-dialog__body{
    padding: 20px;
  }
}
</style>